<template>
    <div class="" id="pdfDom">
        <!-- <magnifier :imgSrc='imgSrc'></magnifier> -->
        <div v-for="(item,index) in list" :key="index" class="box" @drop="(e)=>{drop(e,item,index)}" @dragover="allowDrop($event)">
            <p draggable="true" @dragstart="dragstart($event,item, index)" @dragend="dragend">{{item.name}}</p>
        </div>
        <div @click="setPdf">生成pnf</div>
        <tinymce ref="editor" v-model="msg" :disabled="disabled" @onClick="onClick" />
    </div>
</template>

<script>
// import magnifier from '../components/magnifier.vue'
import tinymce from '../components/tinymce.vue';
export default {
    data () {
        return {
            htmlTitle: '页面导出PDF文件名',
            imgSrc: 'http://nimg.ws.126.net/?url=http://dingyue.ws.126.net/2021/0406/02234735j00qr493z0026c000hs00vmg.jpg&thumbnail=650x2147483647&quality=80&type=jpg',
            // list: ['1号', '2号', '3号', '4号'],
            list: [{
                name: '1号',
                age: 10
            },
            {
                name: '2号',
                age: 10
            },
            {
                name: '3号',
                age: 10
            },
            {
                name: '4号',
                age: 10
            }],
            oldItem: {
                text: '',
                index: ''
            },
            newItem: {
                text: '',
                index: ''
            },
            msg: 'Welcome to Use Tinymce Editor',
            disabled: false
        }
    },

    methods: {
        async setPdf () {
            await this.getPdf('#pdfDom');
            console.log(3333333);
        },
        // 鼠标单击的事件
        onClick (e, editor) {
            console.log('Element clicked')
            console.log(e)
            console.log(editor)
        },
        // 拖动开始的函数
        dragstart (e, item, index) {
            console.log(index, 'item');
            this.oldItem.text = item
            this.oldItem.index = index
        },
        // 放下鼠标后的回调
        drop (event, item, index) {
            event.preventDefault() // 放下鼠标的事件同样需要阻止冒泡
            console.log(index, 123123);
            this.newItem.text = item
            this.newItem.index = index
            this.$set(this.list, this.oldItem.index, item)
            this.$set(this.list, index, this.oldItem.text)
            console.log(this.list, 'list');
        },
        dragend () { },
        // 接收拖动过来的内容 必须阻止时间冒泡
        allowDrop (e) {
            e.preventDefault()
        }
    },
    components: {
        tinymce
        // magnifier
    }
}
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}
.main {
    display: flex;
}
.box {
    width: 100px;
    height: 100px;
    border: 1px solid;
    margin-right: 20px;
    text-align: center;
    line-height: 100px;
}
</style>
